<template>
  <div>
    <div class="table-main">
      <div class="tab-search" v-if="realForm.money!=undefined&&realForm.count!=undefined">
        <div class="data_top_box">
          <div class="data_title" style="margin-bottom:40px;">交易数据</div>
          <div class="sear_btns">
            <el-radio-group v-model="radio3" size="small" @change="handRadioChange">
              <el-radio-button label="今天"></el-radio-button>
              <el-radio-button label="近七天"></el-radio-button>
              <el-radio-button label="近一个月"></el-radio-button>
            </el-radio-group>
            <span class="data_time">日期选择</span>
            <el-date-picker
              v-model="value6"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
            ></el-date-picker>
          </div>
        </div>
        <div class="data_cak">
          <div class="data_item">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="cak_title">实时售额</span>
                <div class="cak_pic">￥{{realForm.count.receipts}}</div>
              </div>
              <div class="cak_fas">
                {{realForm.count.content}}
                <span
                  :class="realForm.count.downup==1?'el-icon-caret-top':'el-icon-caret-bottom'"
                  style="color: #38ad93;"
                ></span>
                {{realForm.count.proportion=='- -'?'- -':realForm.count.proportion+'%'}}
              </div>
            </el-card>
          </div>
          <div class="data_item">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="cak_title">订单数量</span>
                <div class="cak_pic">{{realForm.money.receipts}}</div>
              </div>
              <div class="cak_fas">
                {{realForm.money.content}}
                <span
                  :class="realForm.money.downup==1?'el-icon-caret-top':'el-icon-caret-bottom'"
                  style="color: #38ad93;"
                ></span>
                {{realForm.money.proportion=='- -'?'- -':realForm.money.proportion+'%'}}
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio3: '今天',
      value6: '',
      radio2: '本月',
      topSearchForm: {
        type: '1',
        times: new Date(new Date()).Format('yy-MM')
      },
      realForm: {}
    }
  },
  mounted() {
    this.$api.comParison(this.topSearchForm).then(res => {
      console.log(res.data.data, '获取百分比')
      this.realForm = res.data.data
      this.realForm.count.content = '较前一天'
      this.realForm.money.content = '较前一天'
    })
  },
  methods: {
    handRadioChange(radio) {
      let content = ''
      switch (radio) {
        case '今天':
          this.topSearchForm = {
            type: '1',
            times: new Date(new Date()).Format('yy-MM')
          }
          content = '较前一天'
          break
        case '本周':
          this.topSearchForm = {
            type: '2',
            times: new Date(new Date()).Format('yy-MM')
          }
          content = '较上一周'
          break
        case '本月':
          this.topSearchForm = {
            type: '3',
            times: new Date(new Date()).Format('yy-MM')
          }
          content = '较上个月'
          break
        default:
          this.topSearchForm = {
            type: '1',
            times: new Date(new Date()).Format('yy-MM')
          }
          content = '较前一天'
          break
      }
      this.$api.comParison(this.topSearchForm).then(res => {
        console.log(res.data.data, '获取百分比')
        this.realForm = res.data.data
        this.realForm.count.content = content
        this.realForm.money.content = content
        this.$message({
          message: '筛选成功!',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.data_bottom {
  display: flex;
  align-items: center;
  margin-top: 40px;
  justify-content: space-between;
  .bottom_pic {
    color: #f77441;
    font-size: 16px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 10px;
    &:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f77441;
    }
  }
}
.table-main {
  margin-bottom: 20px;
}
.data_cak {
  margin-top: 40px;
  display: flex;
  align-items: center;
  .data_item {
    width: 256px;
    margin-right: 52px;
  }
  .cak_fas {
    color: #606266;
    font-size: 14px;
  }
  .cak_title {
    color: #909399;
    font-size: 14px;
  }
  .cak_pic {
    color: #000000;
    font-size: 30px;
    margin-top: 8px;
  }
}
.sear_btns {
}
.data_top_box {
  .data_time {
    color: #000000;
    font-size: 14px;
    margin-left: 26px;
    margin-right: 10px;
  }
  .data_title {
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
}
</style>
